<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--[if lt IE 9]><!-->
		<script src="http://code.jquery.com/jquery-1.11.3.min.js "></script>
		<!--<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="https://code.jquery.com/jquery-3.2.1.min.js "></script>
		<!--<![endif]-->
		<script>
			$(function() {
				$("#btn1").click(function() {
					$("h1").add("p").add("span").css("background-color", "yellow");
				});
				$("#btn2").click(function() {
					$("ul").children().css({
						"color": "#ff00ee"
					});
				});
				$("#btn4").click(function() {
					$("ul").find("span").css({"color":"blue","border":"2px solid blue"});
				});
				$("#btn5").click(function() {
					$("span").parent().css({"background-color":"pink"});
				});
				$("#btn6").click(function() {
					$("span").parentsUntil("div").css({"border":"2px solid orange"});
				});
				$("#btn7").click(function() {
					$("span").parents().css({"color":"red","border":"2px solid red"});
				});
				$("#btn3").click(function() {
					$("span").closest("ul").css({
						"border": "2px solid red"
					});
				});

			});
		</script>
		<style>
			.descendants * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
			
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>

	<body>
		<!--<button id="btn1">add()</button>
		<h1>欢迎</h1>
		<p>一个P元素。</p>
		<p>另一个P元素。</p>
		<span>一个span元素。</span>
		<span>一个span元素。</span><br><br>
		<div>本示例为现有的H1元素添加相同的CSS样式为p和span元素。</div>
		<hr />-->
		<button id="btn2">children()</button>
		<button id="btn4">find()</button>
		<button id="btn5">parent()</button>
		<button id="btn6">parentsUntil() </button>
		<button id="btn7">parents() </button>
		<div class="descendants">(曾祖先节点)
			<div style="width:500px;">div (祖先节点)
				<ul>ul (直接父节点)
					<li>li (子节点)
						<span>span (孙节点)</span>
					</li>
				</ul>
			</div>
		</div>
		<hr />
		<!--<button id="btn3">closest()</button>
		<div class="ancestors">body (曾曾祖先节点)
			<div style="width:500px;">div (曾祖先节点)
				<ul>ul (第二祖先 - 第二祖先节点)
					<ul>ul (第一祖先 - 第一祖先节点)
						<li>li (直接父节点)
							<span>span</span>
						</li>
					</ul>
				</ul>
			</div>
		</div>-->

		<!-- 在这个例子中, $("span").closest("ul") 指我们查找一个span元素的第一个ul祖先。最靠近span的祖先是li,但是由于查到一个div，jQuery 跳过li元素继续查找下一个祖先，直到它找出我们要查找的ul.假如我们用parents() 方法替代，它将返回ul的祖先 。 -->
	</body>

</html>